<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/area.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="core clearfix">
            <div class="top-left fl">
                <!-- 位置 -->
                <div class="location fl">
                    <i class="fl"> </i>
                    <a href="#">中原区</a>
                    <div class="locate-box">
                        <div class="hot-city">
                            热门城市：
                            <a>昆明</a>
                            <a>大理</a>
                            <a>贵阳</a>
                            <a>长沙</a>
                            <a>蒙古</a>
                            <span class="removeLocate">x</span>
                        </div>
                        <div class="city-tab clearfix">
                            <a id="selectPro">河南省</a>
                            <a id="selectCity">请选择</a>
                            <a id="selectCounty">请选择</a>
                        </div>
                        <div class="city-content clearfix">

                        </div>
                    </div>
                </div>

                <p class="fl">
                    Hi，欢迎来九机！
                </p>
                <div class="login fl">
                    <a href="./html/login.html">登录 </a>
                </div>
                <div class="register fl">
                    <a href="./html/register.html">免费注册 </a>
                </div>

            </div>

            <div class="top-right fr">
                <a href="#" class="top-user">
                    个人中心
                    <i class="triangle"> </i>
                    <ul>
                        <li>我的订单 </li>
                        <li>我的积分 </li>
                        <li>我的试用</li>
                        <li>我的收藏</li>
                        <li>我的优惠券</li>
                        <li>我的维修</li>

                    </ul>
                </a>
                <a href="#">
                    <i class="icon vip"> </i> 会员俱乐部
                </a>
                <a href="#">帮助中心</a>
                <a href="#" class="top-app">
                    <i class="icon"></i> 客户端
                    <div class="download">
                        <div class="pic fl">
                            <img src="./imgs/appdown.png" width="100px" height="100px">
                            <p>扫描二维码下载</p>
                        </div>
                        <div class="versions fr">
                            <span href="#">Android</span>
                            <span href="#">iPhone</span>
                            <span href="#">触屏版</span>
                        </div>
                    </div>
                </a>
                <a href="#">企业采购</a>
                <a href="#">在线客服</a>
                <a href="#" class="sitemap">
                    网站导航
                    <i class="triangle"> </i>

                    <ul class="clearfix">
                        <li>
                            <h3>九机特色</h3>
                            <div class="site-map-list">
                                <span href="#">附近门店</span>
                                <span href="#">一手优品</span>
                                <span href="#">二手良品</span>
                                <span href="#">旧机回收</span>
                                <span href="#">预约维修</span>
                                <span href="#">九机小店</span>
                            </div>
                        </li>
                        <li>
                            <h3 class="purple">服务集市</h3>
                            <div class="site-map-list">
                                <span href="#">在线支付</span>
                                <span href="#">话费充值</span>
                                <span href="#">试用中心</span>
                                <span href="#">帮助中心</span>
                                <span href="#">九机服务</span>
                                <span href="#" class="huiyuan">
                                    会员俱乐部
                                    <i class="jiaobiao"></i>
                                </span>
                            </div>
                        </li>

                        <li>
                            <h3 class="light-green">更多精选</h3>
                            <div class="site-map-list">
                                <span href="">九机头条</span>

                            </div>
                        </li>
                        <li>
                            <h3 class="light-red">产品选择</h3>
                            <div class="site-map-list">
                                <span href="">手机</span>
                                <span href="">手机配件</span>
                                <span href="">电脑办公</span>
                                <span href="">时尚影音</span>
                                <span href="">智能家居</span>
                                <span href="">娱乐竞技</span>
                            </div>
                        </li>
                    </ul>


                </a>
                <a href="#" class="jubao">
                    <i class="icon"></i> 不良信息举报
                </a>
                <a href="#" class="top-phone">
                    <i class="icon"></i> 400-008-3939
                    <div class="top-free-phone">
                        <p>输入手机号码并<span>免费</span>拨打:</p>
                        <div class="clearfix">
                            <input type="text">
                            <button>拨打</button>
                        </div>

                    </div>

                </a>

            </div>

        </div>
    </div>
    <!-- 头部 -->
    <div class="header core clearfix">
        <div class="logo fl">
            <img src="./imgs/logo.png" alt="">
        </div>
        <div class="header-main fl">
            <div class="search clearfix">
                <input type="text" placeholder="5G手机">
                <button>搜索</button>
            </div>
            <p class="hot-search">
                热门搜索：
                <a href="#">华为 Mate 30</a>
                <a href="#">iPhone 11</a>
                <a href="#"> vivo NEX 3 5G</a>
                <a href="#">iQOO Pro 5G</a>
                <a href="#"> 5G手机</a>
            </p>

        </div>
        <div class="header-shop fr">
            <div class="shop-box">
                <a href="./html/shopcart.html">
                    <i> </i> 购物车
                    <span>0</span> </a>

                <!-- 购物车列表 -->
                <div class="shop-con">
                    <p class="shop-empty">
                        购物车里还没有商品
                    </p>
                    <!-- 购物车商品信息 -->
                    <div class="shop-list clearfix">
                        <div class="shop-list-img fl">
                            <img src="./imgs/shop-list.jpg" width="60" height="60" alt="">
                        </div>
                        <div class="shop-list-con fr">
                            <p class="shop-list-title">
                                <a href="#">华为FreeBuds 2 Pro无线耳机 碳晶黑 </a>
                            </p>
                            <div class="shop-list-price">
                                <b>￥959.00</b>×
                                <a href="javascript:;" class="rid">-</a>
                                <span id="sum">1</span>
                                <a href="javascript:;" class="add">+</a>
                                <span class="shop-remove" id="shop-remove">删除</span>
                            </div>
                        </div>

                    </div>
                    <!-- 结算 -->
                    <div class="shop-account">
                        <p>共<span>1</span>件商品，总计：<b href="#">￥959.00</b>元</p>
                        <a href="./html/shopcart.html" class="account-btn">结算</a>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <!-- 导航栏 -->
    <div class="core">
        <div class="nav clearfix ">
            <a href="#">首页</a>
            <a href="./html/recycle.html">旧机回收</a>
            <a href="#">一手优品</a>
            <a href="#">二手良品</a>
            <a href="#">售后维修
                <span>售后资讯</span>
            </a>
            <a href="#">九机头条</a>
            <a href="#">人气排行</a>
            <a href="#">九机小店</a>

        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="core clearfix">
            <!-- 菜单 -->
            <div class="banner-menu fl">
                <ul class="menu-box">
                    <!-- 手机通讯 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon01.png" alt=""></i>
                            <a href="./html/itemsPage.html" title="手机通讯" class="fl">手机通讯</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="./html/itemsPage.html">5G手机</a>
                            <a href="./html/itemsPage.html">iPhone 11</a>
                            <a href="./html/itemsPage.html">华为 Mate 30</a>
                            <a href="./html/itemsPage.html">三星 Note 10+</a>
                        </div>

                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热门品牌</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为</a>
                                        <a href="#">苹果</a>
                                        <a href="#">荣耀</a>
                                        <a href="#">小米</a>
                                        <a href="#">OPPO</a>
                                        <a href="#">vivo</a>
                                        <a href="#">三星</a>
                                        <a href="#">魅族</a>
                                        <a href="#">美图</a>
                                        <a href="#">一加</a>
                                        <a href="#">努比亚</a>
                                        <a href="#">realme</a>
                                        <a href="#">全部手机</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">价位</a></div>
                                    <div class="fl classify">
                                        <a href="#">0-599</a>
                                        <a href="#">600-999</a>
                                        <a href="#">1000-1999</a>
                                        <a href="#">2000-2999</a>
                                        <a href="#">3000-3999</a>
                                        <a href="#">4000-4999</a>
                                        <a href="#">5000以上</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">网络制式</a></div>
                                    <div class="fl classify">
                                        <a href="#">5G网络</a>
                                        <a href="#">4G全网通</a>
                                        <a href="#">移动/联通双4G</a>
                                        <a href="#">联通4G</a>
                                        <a href="#">电信4G</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">产品特点</a></div>
                                    <div class="fl classify">
                                        <a href="#">屏幕指纹识别</a>
                                        <a href="#">面部识别解锁</a>
                                        <a href="#">全面屏</a>
                                        <a href="#">快速充电</a>
                                        <a href="#">无线充电</a>
                                        <a href="#">液冷散热</a>
                                        <a href="#">双卡双待</a>
                                        <a href="#">指纹识别</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热销机型</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为 P30</a>
                                        <a href="#">iPhone 11</a>
                                        <a href="#">华为 nova 5 Pro</a>
                                        <a href="#">iQOO Pro 5G</a>
                                        <a href="#">荣耀9X</a>
                                        <a href="#">红米 Note 8 Pro</a>
                                        <a href="#">iPhone 11 Pro Max</a>
                                        <a href="#">OPPO Reno</a>
                                        <a href="#">一加7 Pro</a>
                                        <a href="#">华为畅享 10 Plus</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">售后维修</a></div>
                                    <div class="fl classify">
                                        <a href="#">手机维修</a>
                                        <a href="#">维修配件价格</a>
                                        <a href="#">九机服务</a>
                                        <a href="#">苹果电池快修</a>
                                        <a href="#">苹果显示屏快修</a>
                                        <a href="#">手机维修</a>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 手机配件 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon02.png" alt=""></i>
                            <a href="#" title="手机配件" class="fl white f14">手机配件</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="#" class="white">保护膜</a>
                            <a href="#" class="white">保护壳</a>
                            <a href="#" class="white">数据线</a>
                            <a href="#" class="white">充电器</a>
                            <a href="#" class="white">移动电源</a>
                            <a href="#" class="white">手机耳机</a>
                        </div>
                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">保护膜</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为保护膜</a>
                                        <a href="#">苹果保护膜</a>
                                        <a href="#">荣耀保护膜</a>
                                        <a href="#">一加保护膜</a>
                                        <a href="#">OPPO保护膜</a>
                                        <a href="#">vivo保护膜</a>
                                        <a href="#">小米保护膜</a>
                                        <a href="#">三星保护膜</a>
                                        <a href="#">平板保护膜</a>
                                        <a href="#">其他</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">保护壳</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为保护壳</a>
                                        <a href="#">苹果保护壳</a>
                                        <a href="#">荣耀保护壳</a>
                                        <a href="#">一加保护壳</a>
                                        <a href="#">OPPO保护壳</a>
                                        <a href="#">vivo保护壳</a>
                                        <a href="#">小米保护壳</a>
                                        <a href="#">三星保护壳</a>
                                        <a href="#">平板保护壳</a>
                                        <a href="#">其他</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">数据线</a></div>
                                    <div class="fl classify">
                                        <a href="#">快充数据线</a>
                                        <a href="#">苹果数据线</a>
                                        <a href="#">MIFI认证线</a>
                                        <a href="#">安卓Type-C数据线</a>
                                        <a href="#">安卓Micro数据线</a>
                                        <a href="#">多合一数据线</a>
                                        <a href="#">转接头</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">充电器</a></div>
                                    <div class="fl classify">
                                        <a href="#">无线充电器</a>
                                        <a href="#">快充充电器</a>
                                        <a href="#">多口充电器</a>
                                        <a href="#">单口充电器</a>
                                        <a href="#">车载充电器</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">移动电源</a></div>
                                    <div class="fl classify">
                                        <a href="#">超轻薄</a>
                                        <a href="#">双向快充</a>
                                        <a href="#">自带线</a>
                                        <a href="#">无线输出</a>
                                        <a href="#">苹果输入</a>
                                        <a href="#">Type-C输入</a>
                                        <a href="#">安卓Micro输入</a>
                                        <a href="#">单口输出</a>
                                        <a href="#">多口输出</a>
                                        <a href="#">电量数字显示</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">手机耳机</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为耳机</a>
                                        <a href="#">苹果耳机</a>
                                        <a href="#">荣耀耳机</a>
                                        <a href="#">小米耳机</a>
                                        <a href="#">三星耳机</a>
                                        <a href="#">OPPO耳机</a>
                                        <a href="#">vivo耳机</a>
                                        <a href="#">一加耳机</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">手机周边</a></div>
                                    <div class="fl classify">
                                        <a href="#">存储卡</a>
                                        <a href="#">指环扣/支架</a>
                                        <a href="#">自拍杆</a>
                                        <a href="#">读卡器</a>
                                        <a href="#">触控笔</a>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                            </div>
                        </div>

                    </li>
                    <!-- 电脑办公 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon03.png" alt=""></i>
                            <a href="#" title="电脑办公" class="fl white f14">电脑办公</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="#" class="white">平板电脑</a>
                            <a href="#" class="white">轻薄本</a>
                            <a href="#" class="white">游戏本</a>
                            <a href="#" class="white">路由器</a>
                            <a href="#" class="white">键盘/鼠标</a>
                            <a href="#" class="white">U盘</a>
                        </div>
                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">电脑</a></div>
                                    <div class="fl classify">
                                        <a href="#">苹果</a>
                                        <a href="#">华为</a>
                                        <a href="#">荣耀</a>
                                        <a href="#">联想</a>
                                        <a href="#">小米</a>
                                        <a href="#">华硕</a>
                                        <a href="#">戴尔</a>
                                        <a href="#">惠普</a>
                                        <a href="#">微软</a>
                                        <a href="#">机械革命</a>
                                        <a href="#">微星</a>
                                        <a href="#">神舟</a>
                                        <a href="#">一体机</a>
                                        <a href="#">品牌台式机</a>
                                        <a href="#">显示器</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">平板电脑</a></div>
                                    <div class="fl classify">
                                        <a href="#">苹果</a>
                                        <a href="#">华为</a>
                                        <a href="#">荣耀</a>
                                        <a href="#">小米</a>
                                        <a href="#">微软</a>
                                        <a href="#">亚马逊</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">外设产品</a></div>
                                    <div class="fl classify">
                                        <a href="#">鼠标</a>
                                        <a href="#">键盘</a>
                                        <a href="#">键鼠套</a>
                                        <a href="#">U盘</a>
                                        <a href="#">移动硬盘</a>
                                        <a href="#">鼠标垫</a>
                                        <a href="#">转接线</a>
                                        <a href="#">适配器</a>
                                        <a href="#">保护膜</a>
                                        <a href="#">散热器</a>
                                        <a href="#">防辐射眼镜</a>
                                        <a href="#">电脑包</a>
                                        <a href="#">清洁套装</a>
                                        <a href="#">其他推荐</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">办公设备</a></div>
                                    <div class="fl classify">

                                        <a href="#" title="投影仪">投影仪</a>
                                        <a href="#" title="投影仪配件">投影仪配件</a>
                                        <a href="#" title="打印机">打印机</a>
                                        <a href="#" title="办公耗材">办公耗材</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">网络产品</a></div>
                                    <div class="fl classify">
                                        <a href="#">路由器</a>
                                        <a href="#">无线接收器</a>
                                        <a href="#">随行WiFi</a>
                                        <a href="#">网线</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">服务产品</a></div>
                                    <div class="fl classify">
                                        <a href="#">九机上门</a>

                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 智能家居 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon04.png" alt=""></i>
                            <a href="#" title="智能家居/智能健康" class="fl white f14">智能家居/智能健康</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="#" class="white">加湿器</a>
                            <a href="#" class="white">电动牙刷</a>
                            <a href="#" class="white">插座</a>
                            <a href="#" class="white">智能电视</a>
                            <a href="#" class="white">智能家纺</a>
                        </div>
                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">生活周边</a></div>
                                    <div class="fl classify">
                                        <a href="#">电子烟</a>
                                        <a href="#">路由器</a>
                                        <a href="#">插座</a>
                                        <a href="#">电池</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">智能电器</a></div>
                                    <div class="fl classify">
                                        <a href="#">加湿器</a>
                                        <a href="#">灯光照明</a>
                                        <a href="#">榨汁机</a>
                                        <a href="#">扫地机器人</a>
                                        <a href="#">厨房小电</a>
                                        <a href="#">除螨仪</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">电视/盒子</a></div>
                                    <div class="fl classify">
                                        <a href="#">小米电视</a>
                                        <a href="#">荣耀智慧屏</a>
                                        <a href="#">华为智慧屏</a>
                                        <a href="#">小米盒子</a>
                                        <a href="#">荣耀盒子</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">智能安防</a></div>
                                    <div class="fl classify">
                                        <a href="#">智能门锁</a>
                                        <a href="#">智能摄像头</a>
                                        <a href="#">电子猫眼/门铃</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">智能健康</a></div>
                                    <div class="fl classify">
                                        <a href="#">电动牙刷</a>
                                        <a href="#">剃须刀</a>
                                        <a href="#">体脂秤</a>
                                        <a href="#">按摩设备</a>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 智能穿戴 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon05.png" alt=""></i>
                            <a href="#" title="智能穿戴/智能出行" class="fl white f14">智能穿戴/智能出行</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="#" class="white">智能手表</a>
                            <a href="#" class="white">智能手环</a>
                            <a href="#" class="white">儿童手表</a>
                            <a href="#" class="white">车载充电器</a>
                            <a href="#" class="white">车载支架</a>
                        </div>
                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热门品牌</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为</a>
                                        <a href="#">苹果</a>
                                        <a href="#">荣耀</a>
                                        <a href="#">小米</a>
                                        <a href="#">OPPO</a>
                                        <a href="#">vivo</a>
                                        <a href="#">三星</a>
                                        <a href="#">魅族</a>
                                        <a href="#">美图</a>
                                        <a href="#">一加</a>
                                        <a href="#">努比亚</a>
                                        <a href="#">realme</a>
                                        <a href="#">全部手机</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">价位</a></div>
                                    <div class="fl classify">
                                        <a href="#">0-599</a>
                                        <a href="#">600-999</a>
                                        <a href="#">1000-1999</a>
                                        <a href="#">2000-2999</a>
                                        <a href="#">3000-3999</a>
                                        <a href="#">4000-4999</a>
                                        <a href="#">5000以上</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">网络制式</a></div>
                                    <div class="fl classify">
                                        <a href="#">5G网络</a>
                                        <a href="#">4G全网通</a>
                                        <a href="#">移动/联通双4G</a>
                                        <a href="#">联通4G</a>
                                        <a href="#">电信4G</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">产品特点</a></div>
                                    <div class="fl classify">
                                        <a href="#">屏幕指纹识别</a>
                                        <a href="#">面部识别解锁</a>
                                        <a href="#">全面屏</a>
                                        <a href="#">快速充电</a>
                                        <a href="#">无线充电</a>
                                        <a href="#">液冷散热</a>
                                        <a href="#">双卡双待</a>
                                        <a href="#">指纹识别</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热销机型</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为 P30</a>
                                        <a href="#">iPhone 11</a>
                                        <a href="#">华为 nova 5 Pro</a>
                                        <a href="#">iQOO Pro 5G</a>
                                        <a href="#">荣耀9X</a>
                                        <a href="#">红米 Note 8 Pro</a>
                                        <a href="#">iPhone 11 Pro Max</a>
                                        <a href="#">OPPO Reno</a>
                                        <a href="#">一加7 Pro</a>
                                        <a href="#">华为畅享 10 Plus</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">售后维修</a></div>
                                    <div class="fl classify">
                                        <a href="#">手机维修</a>
                                        <a href="#">维修配件价格</a>
                                        <a href="#">九机服务</a>
                                        <a href="#">苹果电池快修</a>
                                        <a href="#">苹果显示屏快修</a>
                                        <a href="#">手机维修</a>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu01.webp">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 时尚影音 -->
                    <li class="menu-item">
                        <div class="title clearfix">
                            <i class="fl"><img src="./imgs/banner-icon06.png" alt=""></i>
                            <a href="#" title="时尚影音/娱乐竞技" class="fl white f14">时尚影音/娱乐竞技</a>
                            <i class="fr"><img src="./imgs/banner-next.png" alt=""></i>
                        </div>
                        <div class="sub-menu">
                            <a href="#" class="white">Beats</a>
                            <a href="#" class="white">SONY</a>
                            <a href="#" class="white">华为</a>
                            <a href="#" class="white">BOse</a>
                            <a href="#" class="white">智能音箱</a>
                            <a href="#" class="white">无人机</a>
                            <a href="#" class="white">摄影摄像</a>
                        </div>
                        <div class="menu-open">
                            <div class="menu-content fl">
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热门品牌</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为</a>
                                        <a href="#">苹果</a>
                                        <a href="#">荣耀</a>
                                        <a href="#">小米</a>
                                        <a href="#">OPPO</a>
                                        <a href="#">vivo</a>
                                        <a href="#">三星</a>
                                        <a href="#">魅族</a>
                                        <a href="#">美图</a>
                                        <a href="#">一加</a>
                                        <a href="#">努比亚</a>
                                        <a href="#">realme</a>
                                        <a href="#">全部手机</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">价位</a></div>
                                    <div class="fl classify">
                                        <a href="#">0-599</a>
                                        <a href="#">600-999</a>
                                        <a href="#">1000-1999</a>
                                        <a href="#">2000-2999</a>
                                        <a href="#">3000-3999</a>
                                        <a href="#">4000-4999</a>
                                        <a href="#">5000以上</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">网络制式</a></div>
                                    <div class="fl classify">
                                        <a href="#">5G网络</a>
                                        <a href="#">4G全网通</a>
                                        <a href="#">移动/联通双4G</a>
                                        <a href="#">联通4G</a>
                                        <a href="#">电信4G</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">产品特点</a></div>
                                    <div class="fl classify">
                                        <a href="#">屏幕指纹识别</a>
                                        <a href="#">面部识别解锁</a>
                                        <a href="#">全面屏</a>
                                        <a href="#">快速充电</a>
                                        <a href="#">无线充电</a>
                                        <a href="#">液冷散热</a>
                                        <a href="#">双卡双待</a>
                                        <a href="#">指纹识别</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">热销机型</a></div>
                                    <div class="fl classify">
                                        <a href="#">华为 P30</a>
                                        <a href="#">iPhone 11</a>
                                        <a href="#">华为 nova 5 Pro</a>
                                        <a href="#">iQOO Pro 5G</a>
                                        <a href="#">荣耀9X</a>
                                        <a href="#">红米 Note 8 Pro</a>
                                        <a href="#">iPhone 11 Pro Max</a>
                                        <a href="#">OPPO Reno</a>
                                        <a href="#">一加7 Pro</a>
                                        <a href="#">华为畅享 10 Plus</a>
                                    </div>
                                </div>
                                <div class="menu-list clearfix">
                                    <div class="fl classify-name"><a href="#">售后维修</a></div>
                                    <div class="fl classify">
                                        <a href="#">手机维修</a>
                                        <a href="#">维修配件价格</a>
                                        <a href="#">九机服务</a>
                                        <a href="#">苹果电池快修</a>
                                        <a href="#">苹果显示屏快修</a>
                                        <a href="#">手机维修</a>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-pic fl">
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                                <div>
                                    <img src="./imgs/menu02.webp">
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <!-- 轮播 -->
            <div class="banner-con fl">
                <a href="#">
                    <div class="banner-box">
                        <img src="./imgs/banner-img02.jpg" alt="">
                        <img src="./imgs/banner-img01.jpg" alt="">
                        <img src="./imgs/banner-img03.jpg" alt="">
                        <img src="./imgs/banner-img04.jpg" alt="">
                    </div>
                </a>
                <span class="up"><img src="./imgs/up.png" alt=""></span>
                <span class="next"><img src="./imgs/nextimg.png" alt=""></span>
                <ul class="dots">
                    <li class="cur"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>



            </div>
            <!-- banner-side -->
            <div class="banner-side fr">
                <div class="user">
                    <div class="user-img">
                        <img src="./imgs/empty.png" alt="">
                    </div>
                    <div>九机欢迎您~</div>
                    <div class="user-login-box">
                        <a href="./html/login.html" class="user-login ">登录</a>
                        <a href="./html/register.html" class="user-register ">注册</a>
                    </div>
                    <div>欢迎回家!您可以前往<span>会员俱乐部</span></div>
                </div>
                <div class="notice">
                    <h3 class="clearfix">
                        <span class="fl">九机头条</span>
                        <span class="fr">更多 ></span>
                    </h3>
                    <div class="notice-title">
                        <p>OnePlus 7T系列今日发布——游戏高帧率时代终于来临！</p>
                        <p>OPPO Reno Ace发布：65W超级闪充，仅售3199元！</p>
                        <p>一张图带你看懂iPhone 11三款新机区别</p>
                    </div>

                </div>
                <div class="service">
                    <a href="#">
                        <img src="./imgs/banner-side01.png" alt="">
                        <p>会员俱乐部</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side02.png" alt="">
                        <p>门店查询</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side03.png" alt="">
                        <p>二手良品</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side04.png" alt="">
                        <p>旧机回收</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side05.png" alt="">
                        <p>九机上门</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side06.png" alt="">
                        <p>试用中心</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side07.png" alt="">
                        <p>移动宽带</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side08.png" alt="">
                        <p>九机快修</p>
                    </a>
                    <a href="#">
                        <img src="./imgs/banner-side09.png" alt="">
                        <p>九机服务</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <!-- lower-price 低价 主轮播下面 -->
        <div class="lower-price core clearfix">
            <a href="./html/detail.html"><img src="imgs/img1.png"></a>
            <a href="./html/detail.html"><img src="imgs/img2.png"></a>
            <a href="./html/detail.html"><img src="imgs/img3.png"></a>
            <a href="./html/detail.html"><img src="imgs/img4.png"></a>
            <a href="./html/detail.html"><img src="imgs/img5.png"></a>
        </div>
        <!-- columns 手机精品 -->
        <div class="columns core clearfix">
            <div class="list phone ">
                <p class="title clearfix"><a href=""><b>手机精品汇</b><span>大牌手机 品质保障</span><i>&gt;</i></a></p>
                <div class="img-box">
                    <a href=""><img src="http://img2.ch999img.com/newstatic/1378/0124604bcfb35902.jpg.webp"></a>
                </div>
                <div class="lb_on">
                    <div class="lb">
                        <ul class="clearfix imgs imgs1" id="imgs1">
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/2019090909311959.jpg.webp">
                                    </div>
                                    <p class="text">华为 畅享10 Plus 全网通版</p>
                                    <p class="price">￥<span>1799</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190916202050147.jpg.webp">
                                    </div>
                                    <p class="text">vivo NEX 3 5G版</p>
                                    <p class="price">￥<span>5698</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20191016140139805.jpg.webp">
                                    </div>
                                    <p class="text">iPhone XR全网通版</p>
                                    <p class="price">￥<span>4599</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190726154446263.jpg.webp">
                                    </div>
                                    <p class="text">华为 Mate 20 X 5G版</p>
                                    <p class="price">￥<span>6199</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190723190409627.jpg.webp">
                                    </div>
                                    <p class="text">华为 荣耀9X Pro 全网通版</p>
                                    <p class="price">￥<span>2199</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190613092636785.jpg.webp">
                                    </div>
                                    <p class="text">OPPO A9x 全网通版</p>
                                    <p class="price">￥<span>1598</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190618234334216.jpg.webp">
                                    </div>
                                    <p class="text">华为 畅享9 Plus 全网通版</p>
                                    <p class="price">￥<span>1350</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190618233723774.jpg.webp">
                                    </div>
                                    <p class="text">华为 nova 4 全网通标配版</p>
                                    <p class="price">￥<span>1799</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190924134040728.jpg.webp">
                                    </div>
                                    <p class="text">vivo U3x 全网通版</p>
                                    <p class="price">￥<span>988</span></p>
                                </a>
                            </li>
                        </ul>
                        <div class="btn" id="btn1">
                            <span class="left">&lt;</span>
                            <span class="right">&gt;</span>
                        </div>
                        <ul class="dot" id="dot1">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list computer ">
                <p class="title clearfix"><a href=""><b>电脑办公专家</b><span>一个极客的诞生</span><i>&gt;</i></a></p>
                <div class="img-box">
                    <a href=""><img src="http://img2.ch999img.com/newstatic/1379/012885b90eb0b5e5.jpg.webp"></a>
                </div>
                <div class="lb_on">
                    <div class="lb">
                        <ul class="clearfix imgs imgs2" id="imgs2">
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20191016140303422.jpg">
                                    </div>
                                    <p class="text">iPad mini 2019款 7.9 英寸 WiFi版</p>
                                    <p class="price">￥<span>2699</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20190603170715881.jpg">
                                    </div>
                                    <p class="text">华硕 飞行堡垒7</p>
                                    <p class="price">￥<span>6750</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20190830162812840.jpg.webp">
                                    </div>
                                    <p class="text">小米 RedmiBook 14英寸</p>
                                    <p class="price">￥<span>4750</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/2019042414223875.jpg.webp">
                                    </div>
                                    <p class="text">华为 WS6500 路由器千兆版</p>
                                    <p class="price">￥<span>249</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20190613102526809.jpg.webp">
                                    </div>
                                    <p class="text">Comma 爱玛系列电脑包</p>
                                    <p class="price">￥<span>119</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20190705132955519.jpg.webp">
                                    </div>
                                    <p class="text">绿联 Type-C扩展坞</p>
                                    <p class="price">￥<span>298</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20190516154617597.jpg.webp">
                                    </div>
                                    <p class="text">RK 950 机械键盘</p>
                                    <p class="price">￥<span>159</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="http://img2.ch999img.com/pic/product/440x440/20180914175621889.jpg.webp">
                                    </div>
                                    <p class="text">雷柏 M100 无线鼠标</p>
                                    <p class="price">￥<span>59</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190506163657177.jpg.webp">
                                    </div>
                                    <p class="text">华硕165Hz刷新 显示器</p>
                                    <p class="price">￥<span>1950</span></p>
                                </a>
                            </li>
                        </ul>
                        <div class="btn" id="btn2">
                            <span class="left">&lt;</span>
                            <span class="right">&gt;</span>
                        </div>
                        <ul class="dot" id="dot2">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list digital ">
                <p class="title clearfix"><a href=""><b>数码新世界</b><span>智能潮货 嗨购不停</span><i>&gt;</i></a></p>
                <div class="img-box">
                    <a href=""><img src="https://img2.ch999img.com/newstatic/1381/012469adbdf8e2b2.jpg.webp"></a>
                </div>
                <div class="lb_on">
                    <div class="lb">
                        <ul class="clearfix imgs imgs3" id="imgs3">
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20191008105914692.jpg.webp">
                                    </div>
                                    <p class="text">新款 AirPods 2代 蓝牙耳机</p>
                                    <p class="price">￥<span>1180</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190520160348734.jpg.webp">
                                    </div>
                                    <p class="text">1MORE Stylish 蓝牙耳机</p>
                                    <p class="price">￥<span>269</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20181026181620440.png.webp">
                                    </div>
                                    <p class="text">华为智能AI音箱</p>
                                    <p class="price">￥<span>369</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190115153131545.jpg.webp">
                                    </div>
                                    <p class="text">小米电视4S 32英寸</p>
                                    <p class="price">￥<span>799</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190312143716230.jpg.webp">
                                    </div>
                                    <p class="text">GoPro hero7运动相机</p>
                                    <p class="price">￥<span>2968</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190703094207851.jpg.webp">
                                    </div>
                                    <p class="text">华为 智能AI音箱mini</p>
                                    <p class="price">￥<span>229</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190624172951130.jpg.webp">
                                    </div>
                                    <p class="text">小米 小爱音箱 Play</p>
                                    <p class="price">￥<span>169</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190627110716262.jpg.webp">
                                    </div>
                                    <p class="text">小米 小爱老师</p>
                                    <p class="price">￥<span>499</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box"><img src="https://img2.ch999img.com/pic/product/440x440/20190315150550685.jpg.webp">
                                    </div>
                                    <p class="text">华为手环3</p>
                                    <p class="price">￥<span>249</span></p>
                                </a>
                            </li>
                        </ul>
                        <div class="btn" id="btn3">
                            <span class="left">&lt;</span>
                            <span class="right">&gt;</span>
                        </div>
                        <ul class="dot" id="dot3">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 售后-以旧换新、上门服务  -->
        <div class="sale-after core clearfix">
            <div class="sale-left sale-move">
                <a href="javascript:;">
                    <img src="imgs/odchangebg.png">
                    <div class="img-box"><img src="imgs/oldchange.png"></div>
                </a>
            </div>
            <div class="sale-right sale-move">
                <a href="javascript:;">
                    <img src="imgs/servicebg.png">
                    <div class="img-box"><img src="imgs/service.png"></div>
                </a>
            </div>
        </div>
        <!-- 超优惠 -->
        <div class="discounts core">
            <div class="discounts-title img-box" id="title-img "><img src="imgs/chaoyouhui.png"></div>
            <div class="discounts-main clearfix">
                <div class="main-left">
                    <div class="main-left-title img-box">
                        <img src="http://img2.ch999img.com//newstatic/719/212fab22cd9c2c.png">
                    </div>
                    <div class="content-on">
                        <div class="contents">
                            <ul class=" clearfix">
                                <li>
                                    <a class="javascript:;">
                                        <div class="title">
                                            <h3 title="欧姆龙 HEM-7127J 上臂式电子血压计">欧姆龙 HEM-7127J 上臂式电子血压计</h3>
                                            <p title="高清大屏,一键测量">高清大屏,一键测量</p>
                                        </div>
                                        <div class="img-box" title="欧姆龙 HEM-7127J 上臂式电子血压计">
                                            <img src="http://img2.ch999img.com/pic/product/440x440/20190808164455407.jpg">
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a class="javascript:;">
                                        <div class="title">
                                            <h3 title="冇心 10000mAh 复古收音机 移动电源">冇心 10000mAh 复古收音机 移动电源</h3>
                                            <p title="双输入双输出,2.1A快充,复古个性设计">双输入双输出,2.1A快充,复古个性设计</p>
                                        </div>
                                        <div class="img-box" title="冇心 10000mAh 复古收音机 移动电源">
                                            <img src="http://img2.ch999img.com/pic/product/440x440/20190923164503213.jpg">
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a class="javascript:;">
                                        <div class="title">
                                            <h3 title="斯泰克 手机制冷散热器">斯泰克 手机制冷散热器</h3>
                                            <p title="半导体制冷,快速有效降温,可搭配吃鸡神器">半导体制冷,快速有效降温,可搭配吃鸡神器</p>
                                        </div>
                                        <div class="img-box" title="斯泰克 手机制冷散热器">
                                            <img src="http://img2.ch999img.com/pic/product/440x440/2019090614343471.jpg">
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a class="javascript:;">
                                        <div class="title">
                                            <h3 title="乐物 水洗牛皮纸笔记本内胆包 14英寸">乐物 水洗牛皮纸笔记本内胆包 14英寸</h3>
                                            <p title="精细做工，彰显品质，有颜值又舒服">精细做工，彰显品质，有颜值又舒服</p>
                                        </div>
                                        <div class="img-box" title="乐物 水洗牛皮纸笔记本内胆包 14英寸">
                                            <img src="http://img2.ch999img.com/pic/product/440x440/20190830174701114.jpg">
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <div class="btn">
                                <span class="left">&lt;</span>
                                <span class="right">&gt;</span>
                            </div>


                        </div>
                    </div>
                </div>
                <div class="main-right">
                    <div class="main-right-title img-box">
                        <img src="http://img2.ch999img.com//newstatic/720/227080d3766607.png">
                    </div>

                    <ul class="content clearfix">
                        <li>
                            <a class="javascript:;">
                                <div class="title">
                                    <h3 title="【华为 荣耀9X 全网通版【魅海蓝 6+128GB 】">【华为 荣耀9X 全网通版【魅海蓝 6+128GB 】</h3>
                                    <p title="快由芯生 超能旗舰">快由芯生 超能旗舰</p>
                                </div>
                                <div class="img-box" title="【华为 荣耀9X 全网通版【魅海蓝 6+128GB 】">
                                    <img src="http://img2.ch999img.com/pic/product/160x160/20190723190409627.jpg">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a class="javascript:;">
                                <div class="title">
                                    <h3 title="【LIDIAN 苹果 iPhone XR 保护壳】">【LIDIAN 苹果 iPhone XR 保护壳】</h3>
                                    <p title="透明展现原机本色">透明展现原机本色</p>
                                </div>
                                <div class="img-box" title="【LIDIAN 苹果 iPhone XR 保护壳】">
                                    <img src="http://img2.ch999img.com/pic/product/440x440/2019041810154372.jpg">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a class="javascript:;">
                                <div class="title">
                                    <h3 title="【公牛 GND-1定时插座】">【公牛 GND-1定时插座】</h3>
                                    <p title="20组电子定时">20组电子定时</p>
                                </div>
                                <div class="img-box" title="【公牛 GND-1定时插座】">
                                    <img src="https://img2.ch999img.com/pic/product/440x440/20190115151300373.jpg">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 楼梯分类 -->
        <div class="stairs core">
            <div class="machine-friends-title img-box" id="title-img"><img src="imgs/jiyoupai.png"></div>
            <div class="floors">
                <div class="floor floor-one">
                    <a class="floor-title img-box" href="#"><img src="imgs/1F.jpg "></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">
                                    <h3 class="color-style" title="iPhone 11 Pro Max">iPhone 11 Pro Max</h3>
                                    <p title="iPhone 11 Pro Max">仿生芯片 后置三摄</p>
                                </div>
                                <a class="img-box">
                                    <img src="imgs/f1-sj1.jpg">
                                </a>

                                <a class="text-bottom background-style" href="#" title="iPhone 11 Pro Max">iPhone 11 Pro
                                    Max
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>快速充电</li>
                                    <li>拍照神器</li>
                                    <li>全面屏</li>
                                    <li>面部解锁</li>
                                </ul>

                            </div>
                        </div>
                        <ul class="main-middle clearfix">
                            <!-- <li >
                                <a href="#">
                                    <div class="texts">
                                        <h3 class="color-style" title="华为 P30 Pro 全网通版">
                                            华为 P30 Pro 全网通版
                                        </h3>
                                        <p class="text" title="华为 P30 Pro 全网通版">影像之美</p>
                                        <p class="price color-style" title="华为 P30 Pro 全网通版">￥4988.0</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="imgs/p30.jpg">
                                    </div>
                                </a>
                            </li>123
                           -->
                        </ul>
                        <ul class="main-right">
                            <li>
                                <a href="./html/detail.html">
                                    <div class="text">
                                        <h3 class="color-style">iPhone XR全网通版</h3>
                                        <p>超视网膜显示屏</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190618233147989.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="./html/detail.html">
                                    <div class="text">
                                        <h3 class="color-style">红米 Redmi Note 8 Pro 全网通版</h3>
                                        <p>价低官网 爆款现货</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190829174848571.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="./html/detail.html">
                                    <div class="text">
                                        <h3 class="color-style">华为 畅享9 全网通高配版</h3>
                                        <p>精致外观 强悍性能</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com//newstatic/1587/011e7faf0d8bb323.png">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">realme Q 全网通版</h3>
                                        <p>四摄迅猛龙 真我手机</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190905154815755.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>
                            <a href="#">苹果</a>
                            <a href="#">华为</a>
                            <a href="#">荣耀</a>
                            <a href="#">小米</a>
                            <a href="#">三星</a>
                            <a href="#">OppO</a>
                            <a href="#">vivo</a>
                            <a href="#">魅族</a>
                            <a href="#">美图</a>
                            <a href="#">一加</a>
                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
                <div class="floor floor-two">
                    <a class="floor-title img-box" href="#"><img src="imgs/2F.jpg"></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">
                                    <h3 class="color-style " title="乐物MFI认证快充线">乐物MFI认证快充线</h3>
                                    <p class="grey-6" title="乐物MFI认证快充线">半小时从0充到50%</p>

                                </div>
                                <a class="img-box">
                                    <img src="http://img2.ch999img.com//newstatic/1591/e28adcd0975a8a.png">
                                </a>

                                <a class="text-bottom background-style" href="#" title="乐物MFI认证快充线">乐物MFI认证快充线
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>保护壳</li>
                                    <li>保护膜</li>
                                    <li>移动电源</li>
                                    <li>数据线</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="main-middle clearfix">
                        </ul>
                        <ul class="main-right">
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">乐物 一拖三 编织充电线</h3>
                                        <p>三线合一 方便使用</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190530164454672.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">华为三脚架自拍杆</h3>
                                        <p>伸缩自如 蓝牙遥控</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20181106152616552.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">华为40W超级快充移动电源</h3>
                                        <p>40W超级快充</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190429143651856.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">乐物 iPhone XR 防摔壳</h3>
                                        <p>亲肤材质 耐用防污</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190827151228883.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>
                            <a href="">苹果保护壳</a>

                            <a href="">品牌保护壳</a>

                            <a href="">平板保护壳</a>

                            <a href="">苹果保护膜</a>

                            <a href="">品牌保护膜</a>

                            <a href="">平板保护膜</a>

                            <a href="">移动电源</a>

                            <a href="">数据线</a>

                            <a href="">充电器</a>

                            <a href="">手机耳机</a>

                            <a href="">手机周边</a>
                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
                <div class="floor floor-three">
                    <a class="floor-title img-box" href="#"><img src="imgs/3F.jpg"></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">

                                    <h3 class="color-style" title="小米 RedmiBook">小米 RedmiBook</h3>
                                    <p title="小米 RedmiBook">独显轻薄本 智能解锁2.0</p>
                                </div>
                                <a class="img-box">
                                    <img src="http://img2.ch999img.com//newstatic/1592/01043234d1b43228.png">
                                </a>

                                <a class="text-bottom background-style" href="#" title="小米 RedmiBook">小米 RedmiBook
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>平板电脑</li>
                                    <li>苹果电脑</li>
                                    <li>办公设备</li>
                                    <li>电脑外设</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="main-middle clearfix">

                        </ul>
                        <ul class="main-right">
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">华为平板 M6 10.8英寸 WiFi版</h3>
                                        <p>纯享音质 身历其境</p>

                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190621153642432.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">华为 WS6500 路由器千兆版</h3>
                                        <p>华为 WS6500 路由器</p>

                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/2019042414223875.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">小米笔记本 15.6英寸 2019款</h3>
                                        <p>国民轻薄本</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190408181400890.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">


                                        <h3 class="color-style">闪迪 酷铄CZ73 U盘</h3>
                                        <p>高速读取 金属盘体</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20170517162000689.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>
                            <a href="">iPad</a>

                            <a href="">平板</a>

                            <a href="">二合一笔记本</a>

                            <a href="">游戏本 </a>

                            <a href="">投影仪</a>

                            <a href="">新款Surface</a>

                            <a href="">品质鼠标</a>

                            <a href="">机械键盘</a>

                            <a href="">高速U盘</a>

                            <a href="">上门服务</a>
                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
                <div class="floor floor-four">
                    <a class="floor-title img-box" href="#"><img src="imgs/4F.jpg"></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">
                                    <h3 class="color-style" title="华为FreeBuds无线耳机">华为FreeBuds无线耳机</h3>
                                    <p title="华为FreeBuds无线耳机">智能语音 现货开售</p>
                                </div>
                                <a class="img-box">
                                    <img src="http://img2.ch999img.com//newstatic/1591/0111b5603627e76f.png">
                                </a>

                                <a class="text-bottom background-style" href="#" title="华为FreeBuds无线耳机">华为FreeBuds无线耳机
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>耳机耳麦</li>
                                    <li>音箱音响</li>
                                    <li>无人机</li>
                                    <li>益智早教</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="main-middle clearfix"></ul>
                        <ul class="main-right">
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">华为FreeBuds 悦享版</h3>
                                        <p>智慧触控悦享无线</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190528142656122.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">Beats PowerBeats Pro蓝牙耳机</h3>
                                        <p>24h续航 抗汗防水</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190902150028946.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">Beats solo3无线蓝牙耳机</h3>
                                        <p>更高颜值 蓝牙连接</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20170517131241467.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">韶音AS650 骨传导耳机</h3>
                                        <p>轻盈防水 安全健康</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/2018071811034921.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>

                            <a href="">beats耳机</a>

                            <a href="">JBL音响</a>

                            <a href="">大疆无人机</a>

                            <a href="">益智早教</a>

                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
                <div class="floor floor-five">
                    <a class="floor-title img-box" href="#"><img src="imgs/5F.jpg"></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">
                                    <h3 class="color-style" title="华为720空气净化器">华为720空气净化器</h3>
                                    <p title="华为720空气净化器">高等级滤芯 高精度检测</p>
                                </div>
                                <a class="img-box">
                                    <img src="http://img2.ch999img.com//newstatic/1587/0106c78176fd61e4.png">
                                </a>

                                <a class="text-bottom background-style" href="#" title="华为720空气净化器">华为720空气净化器
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>智能电视</li>
                                    <li>创意生活</li>
                                    <li>个人护理</li>
                                    <li>智能插座</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="main-middle clearfix"></ul>
                        <ul class="main-right">
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">公牛 USB开关插座</h3>
                                        <p>智能分流 独立开关</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20171220105146276.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">特洛克柠萌插线板</h3>
                                        <p>创意圆形排插</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20181012102251532.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">

                                        <h3 class="color-style">海雀 AI全景摄像头</h3>
                                        <p>华为智选生态产品</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190903115913382.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">飞利浦 电动剃须刀</h3>
                                        <p>全身水洗 三刀头</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20180313155649841.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>
                            <a href="">公牛插座</a>

                            <a href="">加湿设备</a>

                            <a href="">电视盒子</a>

                            <a href="">按摩设备</a>
                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
                <div class="floor floor-six">
                    <a class="floor-title img-box" href="#"><img src="imgs/6F.jpg"></a>
                    <div class="floor-main clearfix">
                        <div class="main-left">
                            <div class="left-top">
                                <div class="text-top">
                                    <h3 class="color-style" title="华为手环3Pro">华为手环3Pro</h3>
                                    <p title="华为手环3Pro">独立GPS 50米防水</p>
                                </div>
                                <a class="img-box">
                                    <img src="http://img2.ch999img.com//newstatic/1588/e20a4fbba5a389.png">
                                </a>

                                <a class="text-bottom background-style" href="#" title="华为手环3Pro">华为手环3Pro
                                    <em>&gt;</em></a>
                            </div>
                            <div class="hot background-style">
                                <h1>热销榜</h1>
                                <ul class="clearfix">
                                    <li>智能手环</li>
                                    <li>儿童手表</li>
                                    <li>蓝牙耳机</li>
                                    <li>平衡车</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="main-middle clearfix"></ul>
                        <ul class="main-right">
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">华米GTS 智能手表</h3>
                                        <p>自定义模块表盘</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190916190731970.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">维肯 车载座式香薰</h3>
                                        <p>合金材质 祛除车内异味</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190802183455379.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">Apple Watch Series 5 GPS版</h3>
                                        <p>这块表 好不一样</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/201909291758548.jpg">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="text">
                                        <h3 class="color-style">米家电动滑板车Pro</h3>
                                        <p>超长续航 强劲动力</p>
                                    </div>
                                    <div class="img-box">
                                        <img src="http://img2.ch999img.com/pic/product/440x440/20190215145334580.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="floor-footer ">
                        <div class="list" id="color-style">
                            <span class="color-style">品质推荐</span>

                            <a href="">华为手表</a>

                            <a href="">小米手环</a>

                            <a href="">米家滑板车</a>

                            <a href="">小天才儿童手表</a>

                        </div>
                        <div class="list-bg background-style"></div>
                    </div>

                </div>
            </div>
            <div class="items-on">
                <p>导航</p>
                <ul class="items">
                    <li class="active item">手机</li>
                    <li class="item">手机配件</li>
                    <li class="item">电脑办公</li>
                    <li class="item">时尚音影</li>
                    <li class="item">智能家居</li>
                    <li class="item">智能穿戴</li>

                </ul>
            </div>
        </div>
        <!-- 更多好货 -->
        <div class="more-goods core">
            <div class="more-goods-title img-box" id="title-img "><img src="imgs/more.png"></div>
            <ul class="more-main clearfix">
                <!-- <li title="iphone XR">
                    <div class="img-box"><img src="imgs/more-goods.jpg"></div>
                    <h1>iphone XR</h1>
                    <p>￥4599</p>
                </li> -->

            </ul>
            <div class="loadmore"><a href="javascript:;" class="button getmore">加载更多好货</a></div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
            <div class="promise core clearfix">
                <a href="" target="_blank">
                    <dl class="clearfix">
                        <dt class="icon icon1"></dt>
                        <dd>
                            <h4>新九机 心生态</h4>
                            <p>全新九机 用心可见</p>
                        </dd>
                    </dl>
                </a>
                <a href="" target="_blank">
                    <dl class="clearfix">
                        <dt class="icon icon2"></dt>
                        <dd>
                            <h4>售假退一罚三</h4>
                            <p>我们承诺，只做正品</p>
                        </dd>
                    </dl>
                </a>
                <a href="" target="_blank">
                    <dl class="clearfix">
                        <dt class="icon icon3"></dt>
                        <dd>
                            <h4>1小时极速达</h4>
                            <p>自建物流，直达客户</p>
                        </dd>
                    </dl>
                </a>
                <a href="" target="_blank">
                    <dl class="clearfix">
                        <dt class="icon icon4"></dt>
                        <dd>
                            <h4>上门快修</h4>
                            <p>线上预约维修，在线评估故障</p>
                        </dd>
                    </dl>
                </a>
                <a href="" target="_blank">
                    <dl class="clearfix">
                        <dt class="icon icon5"></dt>
                        <dd>
                            <h4>门店保障</h4>
                            <p>实体购物，更加安心</p>
                        </dd>
                    </dl>
                </a>
            </div>
            <div class="foot-help ">
                <div class="wrapper core clearfix">
                    <dl>
                        <dt>新手指南</dt>
                        <dd>
                            <a href="">会员注册与使用</a>
                            <a href="">九机评测</a>
                            <a href="">积分介绍</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>付款方式</dt>
                        <dd>
                            <a href="">在线支付</a>
                            <a href="">分期介绍</a>
                            <a href="">退款介绍</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd>
                            <a href="">到店自提</a>
                            <a href="">送货上门</a>
                            <a href="">快递运输</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd>
                            <a href=" ">售后服务政策</a>
                            <a href=" ">维修质保政策</a>
                            <a href=" ">九机服务</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd>
                            <a href=" ">会员介绍</a>
                            <a href=" ">交易条款</a>
                            <a href=" ">常见问题解答</a>
                        </dd>
                    </dl>
                    <dl class=" foot-relation clearfix ">
                        <dt class=" icon code "></dt>
                        <dd class=" text ">
                            <h4>九机网官方微信</h4>
                            <p>扫描二维码，即刻调戏小九，更多精彩活动等着您哦！</p>
                        </dd>
                        <dd class=" wblink ">
                            <a rel=" nofollow " href=" " target=" _blank " class=" xinlang "><i
                                    class=" icon "></i>新浪微博</a>
                            <a rel=" nofollow " href=" " target=" _blank " class=" tengxun "><i
                                    class=" icon "></i>九机贴吧</a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <!-- last最后 -->
        <div class="last core">
            <div class="last-nav">
                <a href="">常见问题</a>
                <i>|</i>
                <a href="">供应商申请</a>
                <i>|</i>
                <a href="">配送服务</a>
                <i>|</i>
                <a href="">招聘信息</a>
                <i>|</i>
                <a href="">关于我们</a>
                <i>|</i>
                <a href="">联系我们</a>
                <i>|</i>
                <a href="">投诉建议</a>
                <i>|</i>
                <a href="">地区报价</a>
                <i>|</i>
                <a href="">IT服务</a>
            </div>
            <div class="copy">

                <p>各门店营业时间：周一至周日 09:00-21:30 &nbsp;&nbsp;&nbsp;&nbsp; 全国服务热线：400-008-3939 &nbsp;&nbsp;0871-68393939 &nbsp;&nbsp;&nbsp;&nbsp; 工作时间：周一至周日 09:00-21:30</p>

                <p>网站ICP备案号：<a href="//www.miibeian.gov.cn/" target="_blank">滇ICP备06002001号</a> &nbsp;&nbsp;&nbsp;&nbsp; 电信业务经营许可证：滇B2-20180054号 &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202000261" target="_blank">滇公网安备 53010202000261号</a> &nbsp;&nbsp;&nbsp;&nbsp; </p>

                <p>Copyright © 2006 - 2019 九机网 All Rights Reserved</p>
                <p>云南九机信息技术有限公司版权所有</p>
            </div>
            <div class="bottom-link">
                <a href=""><img src="imgs/bottom1.jpg"></a>
                <a href=""><img src="imgs/bottom2.png"></a>
                <a href=""><img src="imgs/bottom3.png"></a>
                <a href=""><img src="imgs/bottom4.png"></a>
                <a href=""><img src="imgs/bottom5.png"></a>
                <a href=""><img src="imgs/bottom6.jpg"></a>
            </div>
        </div>
    </div>




    <!-- 侧边栏 -->
    <div class="sidebar">

        <div class="sidebar-box">

            <a href="./html/shopcart.html">
                <svg aria-hidden="true" width="16" height="14.222222222222221" viewBox="0 0 576 512" focusable="false" class="fa-icon" data-v-75310c33="" color="#fff">
                    <path
                        d="M528.1 301.3c-2.5 10.9-12.2 18.7-23.4 18.7h-293.1l6.5 32h268.4c15.4 0 26.8 14.3 23.4 29.3l-5.5 24.3c18.7 9.1 31.6 28.2 31.6 50.4 0 30.9-25.1 56-56 56s-56-25.1-56-56c0-15.7 6.4-29.8 16.8-40h-209.6c10.4 10.2 16.8 24.3 16.8 40 0 30.9-25.1 56-56 56s-56-25.1-56-56c0-20.8 11.3-38.9 28.1-48.6l-70.2-343.4h-69.9c-13.3 0-24-10.7-24-24v-16c0-13.3 10.7-24 24-24h102.5c11.4 0 21.2 8 23.5 19.2l9.2 44.8h392.8c15.4 0 26.8 14.3 23.4 29.3z">
                    </path>
                </svg>
                <span>购物车</span>
            </a>
            <a href="#">

                <svg version="1.1" role="presentation" width="16" height="16" viewBox="0 0 616 512" data-v-148db043="" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M602 118.6L537.1 15C531.3 5.7 521 0 510 0H106C95 0 84.7 5.7 78.9 15L14 118.6c-33.5 53.5-3.8 127.9 58.8 136.4 4.5.6 9.1.9 13.7.9 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18.1 20.1 44.3 33.1 73.8 33.1 4.7 0 9.2-.3 13.7-.9 62.8-8.4 92.6-82.8 59-136.4zM529.5 288c-10 0-19.9-1.5-29.5-3.8V384H116v-99.8c-9.6 2.2-19.5 3.8-29.5 3.8-6 0-12.1-.4-18-1.2-5.6-.8-11.1-2.1-16.4-3.6V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32V283.2c-5.4 1.6-10.8 2.9-16.4 3.6-6.1.8-12.1 1.2-18.2 1.2z"
                        data-v-75310c33=""> </path>
                </svg>
                <span>附近门店</span>
            </a>
            <a href="#">
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 512 512" focusable="false" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M256 32c141.5 0 256 114.5 256 256v48c0 10.9-7.9 23.7-17.7 28.6l-14.4 7.2c-2 60.1-51.3 108.2-111.9 108.2h-24c-13.3 0-24-10.7-24-24v-176c0-13.3 10.7-24 24-24h24c31.3 0 59.7 12.9 80 33.6v-1.6c0-105.9-86.1-192-192-192s-192 86.1-192 192v1.6c20.3-20.7 48.7-33.6 80-33.6h24c13.3 0 24 10.7 24 24v176c0 13.3-10.7 24-24 24h-24c-60.6 0-109.9-48.1-111.9-108.2l-14.4-7.2c-9.8-4.9-17.7-17.7-17.7-28.6v0-48c0-141.5 114.5-256 256-256z">
                    </path>
                </svg>
                <span>咨询客服</span>
            </a>


            <a href="#">

                <svg aria-hidden="true" width="16" height="14.222222222222221" viewBox="0 0 576 512" focusable="false" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7v145.4c0 26.5-21.5 48-48 48h-352c-26.5 0-48-21.5-48-48v-352c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3h-241.5v352h352v-113.5c0-2.1 0.8-4.1 2.3-5.6zM558.9 143.1l-262.6 262.6-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4 262.6-262.6c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 0.1 82.8zM460.1 174l-58.1-58.1-185.8 185.9-7.3 65.3 65.3-7.3zM524.9 94.3l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0l-30.9 30.9 58.1 58.1 30.9-30.9c4-4.2 4-10.8-0.1-14.9z">
                    </path>
                </svg>
                <span>投诉建议</span>
            </a>
            <a href="#">

                <svg aria-hidden="true" width="16" height="14.222222222222221" viewBox="0 0 576 512" focusable="false" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M385.2 167.6c-92.4 0-165.4 69.1-165.3 154 0 14.2 2.2 27.9 6.2 40.8-6.2 0.5-12.1 0.8-18.3 0.8-24.4 0-43.8-4.9-68.2-9.7l-68 34.1 19.3-58.6c-48.6-34.1-77.9-78.2-77.9-131.6 0-92.6 87.5-165.4 194.7-165.4 95.6 0 179.7 58.3 196.3 136.7-6.2-0.8-12.4-1.1-18.8-1.1zM280.7 114.7c-14.7 0-29.2 9.7-29.3 24.4 0 14.5 14.5 24.2 29.3 24.2 14.5 0 24.2-9.7 24.2-24.2 0-14.7-9.7-24.4-24.2-24.4zM144.3 163.3c14.8 0 24.4-9.6 24.4-24.2 0-14.7-9.6-24.4-24.4-24.4-14.5 0-29.3 9.6-29.3 24.4 0 14.5 14.8 24.2 29.3 24.2zM563 319.4c0 43.8-29 82.7-68.2 112.1l14.8 48.6-53.4-29.3c-19.7 4.8-39.3 9.9-58.6 9.9-92.6 0-165.4-63.4-165.4-141.3 0-77.9 72.7-141.3 165.4-141.3 87.5 0 165.4 63.4 165.4 141.3zM343.9 294.9c14.7 0 24.4-9.6 24.4-19.6 0-9.6-9.6-19.3-24.4-19.3-9.6 0-19.3 9.6-19.3 19.3 0 9.9 9.6 19.6 19.3 19.6zM451 294.9c14.5 0 24.5-9.6 24.4-19.6 0-9.6-9.9-19.3-24.4-19.3-9.6 0-19.3 9.6-19.3 19.3 0 9.9 9.6 19.6 19.3 19.6z">
                    </path>
                </svg>
                <span class="slide-white"><img src="./imgs/appdown.png" alt="" width="100" height="100"></span>
            </a>
            <a href="#">
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 512 512" focusable="false" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M0 168v-16c0-13.3 10.7-24 24-24h360v-48c0-21.4 25.9-32 41-17l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-15 15-41 4.5-41-17v-48h-360c-13.3 0-24-10.7-24-24zM488 320c13.3 0 24 10.7 24 24v16c0 13.3-10.7 24-24 24h-360v48c0 21.4-25.9 32-41 17l-80-80c-9.4-9.4-9.4-24.6 0-33.9l80-80c15.1-15.1 41-4.3 41 17v48h360z">
                    </path>
                </svg>
                <span>产品对比</span>
            </a>
            <a href="javascript:;" class="totop">
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 512 512" focusable="false" class="fa-icon" data-v-75310c33="">
                    <path
                        d="M256 504c-137 0-248-111-248-248s111-248 248-248 248 111 248 248-111 248-248 248zM256 56c-110.5 0-200 89.5-200 200s89.5 200 200 200 200-89.5 200-200-89.5-200-200-200zM276 384h-40c-6.6 0-12-5.4-12-12v-116h-67c-10.7 0-16-12.9-8.5-20.5l99-99c4.7-4.7 12.3-4.7 17 0l99 99c7.6 7.6 2.2 20.5-8.5 20.5h-67v116c0 6.6-5.4 12-12 12z">
                    </path>
                </svg>
                <span id="toTop">回到顶部</span>
            </a>


        </div>
    </div>


    <script>
        $(function() {
            // tab切换效果
            $(".city-tab a").eq(0).addClass("red-bor");
            $(".city-tab a").click(function() {
                $(this).addClass("red-bor").siblings().removeClass("red-bor")
            })

            var province = ""
            var city = ""
            var county = ""
                // 初始化省
            for (key in place) {
                province += " <a class='pro' href='javascript:;' title=" + key + ">" + key + "</a>"

            }

            $(".city-content").html(province)
                // 点击省之后 城市变成请选择
            $("#selectPro").click(function() {
                $(".city-content").html(province);
                $("#selectCity").html("请选择")
                $("#selectCounty").html("请选择")
                city = "";
            })

            // 选择好省后跳转到市
            $(".city-content").on("click", ".pro", function() {

                    $(".city-tab a").eq(1).addClass("red-bor").siblings().removeClass("red-bor");
                    $("#selectPro").html($(this).html())
                    var proHtml = $("#selectPro").html()
                    for (key in place[proHtml][0]) {
                        city += " <a class='city' href='javascript:;' title=" + key + ">" + key + "</a>"
                    }


                    $(".city-content").html(city)
                })
                // 点击市
            $("#selectCity").click(function() {
                var proHtml = $("#selectPro").html()
                if (!city) {
                    for (key in place[proHtml][0]) {
                        city += " <a class='city' href='javascript:;' title=" + key + ">" + key + "</a>"
                    }
                }
                $(".city-content").html(city);
                $("#selectCounty").html("请选择")
                county = ""

            })

            // 选好市之后跳转到县
            $(".city-content").on("click", ".city", function() {

                // 下划线
                $(".city-tab a").eq(2).addClass("red-bor").siblings().removeClass("red-bor");
                $("#selectCity").html($(this).html())
                var proHtml = $("#selectPro").html()
                var cityHtml = $("#selectCity").html()
                data = place[proHtml][0][cityHtml]
                for (key in data) {
                    data1 = data[key]
                    for (key in data1) {
                        county += " <a class='county' href='javascript:;' title=" + key + ">" + key + "</a>"

                    }
                }

                $(".city-content").html(county)
                county = ""
            })

            // 选好县
            $(".city-content").on("click", ".county", function() {
                    $("#selectCounty").html($(this).html())
                    var countyHtml = $("#selectCounty").html()
                    console.log($(".location>a").html(countyHtml));

                    console.log($(this).parent().parent().hide());


                })
                //点击关闭
            $(".removeLocate").click(function() {
                    $(".locate-box").hide()
                })
                // 显示隐藏的动画
            $(".location").hover(function() {
                $(".locate-box").show().animate({
                    "top": "30px"
                })
            }, function() {
                setTimeout(function() {
                    $(".locate-box").hide()
                    $(".locate-box").css({
                        "top": "25px"
                    })
                }, 200)


            })


            // -------------------------------------------------------------------



            //    渲染页面 
            // 楼层渲染
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                type_id: 1
            }, function(data) {
                console.log(data);
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += `<li class="bottom">
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                }
                $(".floor-one  .main-middle").append(str)

            })
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                type_id: 2
            }, function(data) {
                console.log(data);
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += `<li >
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                }
                $(".floor-two  .main-middle").append(str)

            })
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                type_id: 3
            }, function(data) {
                console.log(data);
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += `<li>
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                }
                $(".floor-three  .main-middle").append(str)

            })
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                type_id: 4
            }, function(data) {
                console.log(data);
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += `<li >
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                }
                $(".floor-four  .main-middle").append(str)

            })
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                type_id: 5
            }, function(data) {
                console.log(data);
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += `<li >
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                }
                $(".floor-five  .main-middle").append(str)

            })
            $.getJSON("http://localhost/jiuji/api/floor.php", {
                    type_id: 6
                }, function(data) {
                    console.log(data);
                    var str = ""
                    for (var i = 0; i < data.length; i++) {
                        str += `<li>
                    <a href="#">
                    <div class="texts">
                        <h3 class="color-style" title="${data[i].name}">
                           ${data[i].name}
                                        </h3>
                        <p class="text" title="${data[i].name}">${data[i].content}</p>
                        <p class="price color-style" title="${data[i].name}">￥${data[i].price}</p>
                    </div>
                    <div class="img-box">
                        <img src="${data[i].img}" alt="${data[i].img_alt}">
                                    </div>
                     </a>
                </li>`
                    }
                    $(".floor-six  .main-middle").append(str)

                })
                // 更多好物渲染
            $.getJSON("http://localhost/jiuji/api/more-good.php", function(data) {
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += ` <li title="${data[i].name}">
                    <div class="img-box"><img src="${data[i].img}" alt="${data[i].img_alt}"></div>
                    <h1>${data[i].name}</h1>
                    <p>￥${data[i].price}</p>
                </li>`
                }
                $(".more-goods .more-main").append(str)
            })


        })
    </script>



</body>

</html>